<template>
  <div class="mod-config" style="background: #f9f9f9">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getCensusData()">
      <el-form-item>
        <el-date-picker
          v-model="dataForm.date"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getCensusData()">查询</el-button>
      </el-form-item>
    </el-form>
    <rectangle :key="key" :className="className" :optionData="optionData"></rectangle>
    <div class="circle">
      <sector style="width: 400px" :key="key" :opinionData="opinionData"></sector>
    </div>
  </div>
  <!--饼状图-->
</template>

<script>
import sector from "@/components/echarts/sector.vue";
import rectangle from "@/components/echarts/rectangle.vue";

export default {
  name: "",
  data() {
    return {
      dataForm: {
        date: "",
      },
      key: new Date().getTime(),
      opinionData: [],
      optionData: [],
      className: [],
    };
  },
  watch: {
    key: function () {
      this.key = new Date().getTime();
    },
  },
  components: {
    sector,
    rectangle,
  },
  mounted() {
    this.getCensusData();
  },
  methods: {
    getCensusData() {
      if (this.dataForm.date == "" || this.dataForm.date == undefined) {
        this.dataForm.date = this.getNowFormatDate();
      }
      this.$http({
        url: this.$http.adornUrl(`/secretary/census/sector/${this.dataForm.date}`),
        method: "get",
        params: this.$http.adornParams(),
      })
        .then(({ data }) => {
          if (data && data.code === 0) {
            var census = data.census;
            this.opinionData = [];
            this.opinionData.push({
              value: census.punchStudent,
              name: "已打卡",
            });
            this.opinionData.push({
              value: census.noPunchStudent,
              name: "未打卡",
            });
          } else {
            this.$message.error("查询打卡详情失败,请稍后再试");
          }
        })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl(`/secretary/census/rectangle/${this.dataForm.date}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              console.log("className", this.className);
              let punch = [];
              let noPunch = [];
              this.className = [];
              this.optionData = [];
              var census = data.census;
              var len = census.length;
              for (var i = 0; i < len; i++) {
                this.className.push(census[i].topic);
                punch.push(census[i].punchStudent);
                noPunch.push(census[i].noPunchStudent);
              }
              this.optionData.push({
                name: "未打卡",
                type: "bar",
                data: noPunch,
              });
              this.optionData.push({
                name: "已打卡",
                type: "bar",
                data: punch,
              });
              console.log("this.optionData", this.optionData);
              console.log("this.className", this.className);
              this.key = new Date().getTime();
            } else {
              this.$message.error("查询打卡详情失败,请稍后再试");
            }
          });
        });
    },
    getNowFormatDate() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + "-" + month + "-" + strDate;
      return currentdate;
    },
  },
};
</script>

<style scoped>
.circle{
  display:flex;
  align-items: center;
  justify-content: center;
}
</style>
